React การแสดงผลพร้อมกัน: ปลดล็อกประสิทธิภาพด้วยสถาปัตยกรรม Fiber และการวิเคราะห์ Work Loop

React ซึ่งเป็นพลังที่โดดเด่นในการพัฒนา front-end ได้พัฒนาอย่างต่อเนื่องเพื่อตอบสนองความต้องการของส่วนต่อประสานผู้ใช้ที่ซับซ้อนและโต้ตอบได้มากขึ้น หนึ่งในความก้าวหน้าที่สำคัญที่สุดในการพัฒนานี้คือการแสดงผลพร้อมกัน ซึ่งเปิดตัวพร้อมกับ React 16 การเปลี่ยนแปลงกระบวนทัศน์นี้ได้เปลี่ยนวิธีการที่ React จัดการการอัปเดตและแสดงองค์ประกอบอย่างมาก ซึ่งเป็นการปลดล็อกการปรับปรุงประสิทธิภาพที่สำคัญและเปิดใช้งานประสบการณ์ผู้ใช้ที่ตอบสนองได้มากขึ้น บทความนี้เจาะลึกแนวคิดหลักของการแสดงผลพร้อมกัน สำรวจสถาปัตยกรรม Fiber และ work loop และให้ข้อมูลเชิงลึกเกี่ยวกับวิธีการที่กลไกเหล่านี้มีส่วนช่วยให้แอปพลิเคชัน React ราบรื่นและมีประสิทธิภาพยิ่งขึ้น

ทำความเข้าใจกับความต้องการในการแสดงผลพร้อมกัน

ก่อนการแสดงผลพร้อมกัน React ทำงานในลักษณะซิงโครนัส เมื่อมีการอัปเดตเกิดขึ้น (เช่น การเปลี่ยนแปลงสถานะ การอัปเดตคุณสมบัติ) React จะเริ่มแสดงต้นไม้ขององค์ประกอบทั้งหมดในการดำเนินการครั้งเดียวที่ไม่ถูกขัดจังหวะ การแสดงผลแบบซิงโครนัสนี้อาจนำไปสู่ปัญหาคอขวดด้านประสิทธิภาพ โดยเฉพาะอย่างยิ่งเมื่อต้องรับมือกับต้นไม้ขององค์ประกอบขนาดใหญ่หรือการดำเนินการที่ใช้การคำนวณมาก ในช่วงเวลาการแสดงผลเหล่านี้ เบราว์เซอร์จะไม่ตอบสนอง ซึ่งนำไปสู่ประสบการณ์ผู้ใช้ที่ไม่ราบรื่นและน่าผิดหวัง ซึ่งมักเรียกกันว่า "การปิดกั้นเธรดหลัก"

ลองนึกภาพสถานการณ์ที่ผู้ใช้กำลังพิมพ์ลงในช่องข้อความ หากองค์ประกอบที่รับผิดชอบในการแสดงข้อความที่พิมพ์เป็นส่วนหนึ่งของต้นไม้ขององค์ประกอบขนาดใหญ่และซับซ้อน แต่ละการกดแป้นพิมพ์อาจเรียกใช้การแสดงผลใหม่ที่ปิดกั้นเธรดหลัก ซึ่งจะส่งผลให้เกิดความล่าช้าที่เห็นได้ชัดและประสบการณ์ผู้ใช้ที่ไม่ดี

การแสดงผลพร้อมกันแก้ไขปัญหานี้โดยอนุญาตให้ React แบ่งงานการแสดงผลออกเป็นหน่วยย่อยๆ ที่สามารถจัดการได้ หน่วยเหล่านี้สามารถจัดลำดับความสำคัญ หยุดชั่วคราว และดำเนินการต่อได้ตามต้องการ ซึ่งช่วยให้ React สามารถสลับงานการแสดงผลกับการดำเนินการเบราว์เซอร์อื่นๆ เช่น การจัดการการป้อนข้อมูลของผู้ใช้หรือคำขอเครือข่าย แนวทางนี้ป้องกันไม่ให้เธรดหลักถูกปิดกั้นเป็นระยะเวลานาน ซึ่งส่งผลให้ประสบการณ์ผู้ใช้ตอบสนองและคล่องตัวมากขึ้น ลองนึกภาพว่าเป็นการทำงานหลายอย่างพร้อมกันสำหรับกระบวนการแสดงผลของ React

แนะนำสถาปัตยกรรม Fiber

หัวใจสำคัญของการแสดงผลพร้อมกันคือสถาปัตยกรรม Fiber Fiber แสดงถึงการนำอัลกอริทึมการประนีประนอมภายในของ React มาใช้อีกครั้งอย่างสมบูรณ์ ซึ่งแตกต่างจากกระบวนการประนีประนอมแบบซิงโครนัสก่อนหน้านี้ Fiber นำเสนอแนวทางที่ซับซ้อนและละเอียดอ่อนมากขึ้นในการจัดการการอัปเดตและแสดงองค์ประกอบ

Fiber คืออะไร

Fiber สามารถเข้าใจได้ในเชิงแนวคิดว่าเป็นตัวแทนเสมือนของอินสแตนซ์องค์ประกอบ องค์ประกอบแต่ละรายการในแอปพลิเคชัน React ของคุณเกี่ยวข้องกับโหนด Fiber ที่สอดคล้องกัน โหนด Fiber เหล่านี้สร้างโครงสร้างต้นไม้ที่สะท้อนต้นไม้ขององค์ประกอบ โหนด Fiber แต่ละโหนดเก็บข้อมูลเกี่ยวกับองค์ประกอบ คุณสมบัติ ลูกหลาน และสถานะปัจจุบัน ซึ่งมีความสำคัญอย่างยิ่งคือ ยังมีข้อมูลเกี่ยวกับงานที่ต้องทำสำหรับองค์ประกอบนั้นๆ อีกด้วย

คุณสมบัติหลักของโหนด Fiber ได้แก่:

• ประเภท: ประเภทขององค์ประกอบ (เช่น div, MyComponent)
• คีย์: คีย์ที่ไม่ซ้ำกันที่กำหนดให้กับองค์ประกอบ (ใช้สำหรับการประนีประนอมที่มีประสิทธิภาพ)
• props: คุณสมบัติที่ส่งไปยังองค์ประกอบ
• child: ตัวชี้ไปยังโหนด Fiber ที่แสดงถึงลูกคนแรกขององค์ประกอบ
• sibling: ตัวชี้ไปยังโหนด Fiber ที่แสดงถึงพี่น้องถัดไปขององค์ประกอบ
• return: ตัวชี้ไปยังโหนด Fiber ที่แสดงถึงผู้ปกครองขององค์ประกอบ
• stateNode: การอ้างอิงถึงอินสแตนซ์องค์ประกอบจริง (เช่น โหนด DOM สำหรับองค์ประกอบโฮสต์ อินสแตนซ์องค์ประกอบคลาส)
• alternate: ตัวชี้ไปยังโหนด Fiber ที่แสดงถึงเวอร์ชันก่อนหน้าขององค์ประกอบ
• effectTag: แฟล็กที่ระบุประเภทของการอัปเดตที่จำเป็นสำหรับองค์ประกอบ (เช่น การจัดวาง การอัปเดต การลบ)

ต้นไม้ Fiber

ต้นไม้ Fiber เป็นโครงสร้างข้อมูลแบบถาวรที่แสดงถึงสถานะปัจจุบันของ UI ของแอปพลิเคชัน เมื่อมีการอัปเดต React จะสร้างต้นไม้ Fiber ใหม่ในพื้นหลัง ซึ่งแสดงถึงสถานะที่ต้องการของ UI หลังจากการอัปเดต ต้นไม้ใหม่นี้เรียกว่าต้นไม้ "กำลังดำเนินการ" เมื่อต้นไม้กำลังดำเนินการเสร็จสมบูรณ์ React จะสลับกับต้นไม้ปัจจุบัน ทำให้การเปลี่ยนแปลงมองเห็นได้สำหรับผู้ใช้

แนวทางต้นไม้คู่แบบนี้ช่วยให้ React สามารถดำเนินการอัปเดตการแสดงผลในลักษณะที่ไม่ปิดกั้นได้ ต้นไม้ปัจจุบันยังคงมองเห็นได้สำหรับผู้ใช้ในขณะที่ต้นไม้กำลังดำเนินการกำลังถูกสร้างขึ้นในพื้นหลัง ซึ่งจะป้องกันไม่ให้ UI หยุดชะงักหรือไม่มีการตอบสนองในระหว่างการอัปเดต

ประโยชน์ของสถาปัตยกรรม Fiber

• การแสดงผลที่ขัดจังหวะได้: Fiber ช่วยให้ React สามารถหยุดชั่วคราวและดำเนินการต่องานการแสดงผลได้ ช่วยให้สามารถจัดลำดับความสำคัญของการโต้ตอบของผู้ใช้และป้องกันไม่ให้เธรดหลักถูกปิดกั้น
• การแสดงผลแบบเพิ่มหน่วย: Fiber ช่วยให้ React สามารถแบ่งการอัปเดตการแสดงผลออกเป็นหน่วยย่อยๆ ซึ่งสามารถประมวลผลทีละน้อยเมื่อเวลาผ่านไป
• การจัดลำดับความสำคัญ: Fiber ช่วยให้ React สามารถจัดลำดับความสำคัญของการอัปเดตประเภทต่างๆ เพื่อให้แน่ใจว่าการอัปเดตที่สำคัญ (เช่น การป้อนข้อมูลของผู้ใช้) ได้รับการประมวลผลก่อนการอัปเดตที่สำคัญน้อยกว่า (เช่น การดึงข้อมูลเบื้องหลัง)
• การจัดการข้อผิดพลาดที่ดีขึ้น: Fiber ทำให้ง่ายต่อการจัดการข้อผิดพลาดในระหว่างการแสดงผล เนื่องจากช่วยให้ React สามารถย้อนกลับไปยังสถานะที่เสถียรก่อนหน้าได้หากเกิดข้อผิดพลาด

Work Loop: วิธีที่ Fiber เปิดใช้งานการทำงานพร้อมกัน

Work loop คือเครื่องมือที่ขับเคลื่อนการแสดงผลพร้อมกัน มันเป็นฟังก์ชันเรียกซ้ำที่สำรวจต้นไม้ Fiber ดำเนินการกับโหนด Fiber แต่ละโหนด และอัปเดต UI ทีละน้อย Work loop มีหน้าที่ในการทำงานดังต่อไปนี้:

• การเลือก Fiber ถัดไปที่จะประมวลผล
• ดำเนินการกับ Fiber (เช่น การคำนวณสถานะใหม่ การเปรียบเทียบคุณสมบัติ การแสดงองค์ประกอบ)
• การอัปเดตต้นไม้ Fiber ด้วยผลลัพธ์ของงาน
• การตั้งเวลาให้ทำงานมากขึ้น

ขั้นตอนของ Work Loop

Work loop ประกอบด้วยสองขั้นตอนหลัก:

1. Render Phase (หรือที่เรียกว่า Reconciliation Phase): ขั้นตอนนี้มีหน้าที่สร้างต้นไม้ Fiber ที่กำลังดำเนินการ ในระหว่างขั้นตอนนี้ React จะสำรวจต้นไม้ Fiber โดยเปรียบเทียบต้นไม้ปัจจุบันกับสถานะที่ต้องการและกำหนดว่าจะต้องทำการเปลี่ยนแปลงอะไรบ้าง ขั้นตอนนี้เป็นแบบอะซิงโครนัสและขัดจังหวะได้ มันกำหนดสิ่ง *ที่* ต้องมีการเปลี่ยนแปลงใน DOM
2. Commit Phase: ขั้นตอนนี้มีหน้าที่นำการเปลี่ยนแปลงไปใช้กับ DOM จริง ในระหว่างขั้นตอนนี้ React จะอัปเดตโหนด DOM เพิ่มโหนดใหม่ และลบโหนดเก่า ขั้นตอนนี้เป็นแบบซิงโครนัสและไม่ขัดจังหวะ มัน *ทำ* การเปลี่ยนแปลง DOM

วิธีที่ Work Loop เปิดใช้งานการทำงานพร้อมกัน

หัวใจสำคัญของการแสดงผลพร้อมกันอยู่ที่ความจริงที่ว่า Render Phase เป็นแบบอะซิงโครนัสและขัดจังหวะได้ ซึ่งหมายความว่า React สามารถหยุด Render Phase ชั่วคราวได้ตลอดเวลาเพื่อให้เบราว์เซอร์สามารถจัดการงานอื่นๆ เช่น การป้อนข้อมูลของผู้ใช้หรือคำขอเครือข่าย เมื่อเบราว์เซอร์ไม่ได้ใช้งาน React สามารถกลับมาดำเนินการ Render Phase ต่อจากที่ค้างไว้ได้

ความสามารถในการหยุดชั่วคราวและดำเนินการ Render Phase ต่อได้นี้ช่วยให้ React สามารถสลับงานการแสดงผลกับการดำเนินการเบราว์เซอร์อื่นๆ ได้ ป้องกันไม่ให้เธรดหลักถูกปิดกั้นและรับประกันประสบการณ์ผู้ใช้ที่ตอบสนองได้มากขึ้น Commit Phase ในทางกลับกัน จะต้องเป็นแบบซิงโครนัสเพื่อให้แน่ใจถึงความสอดคล้องกันใน UI อย่างไรก็ตาม Commit Phase โดยทั่วไปจะเร็วกว่า Render Phase มาก ดังนั้นจึงมักจะไม่ทำให้เกิดปัญหาคอขวดด้านประสิทธิภาพ

การจัดลำดับความสำคัญใน Work Loop

React ใช้ขั้นตอนวิธีตั้งเวลาตามลำดับความสำคัญเพื่อกำหนดว่าจะประมวลผลโหนด Fiber ใดก่อน ขั้นตอนนี้กำหนดระดับความสำคัญให้กับการอัปเดตแต่ละครั้งตามความสำคัญ ตัวอย่างเช่น การอัปเดตที่เกิดจากการป้อนข้อมูลของผู้ใช้มักจะได้รับมอบหมายให้มีความสำคัญสูงกว่าการอัปเดตที่เกิดจากการดึงข้อมูลเบื้องหลัง

Work loop จะประมวลผลโหนด Fiber ที่มีความสำคัญสูงสุดก่อนเสมอ ซึ่งทำให้มั่นใจได้ว่าการอัปเดตที่สำคัญจะได้รับการประมวลผลอย่างรวดเร็ว ทำให้ได้รับประสบการณ์ผู้ใช้ที่ตอบสนองได้ การอัปเดตที่สำคัญน้อยกว่าจะได้รับการประมวลผลในพื้นหลังเมื่อเบราว์เซอร์ไม่ได้ใช้งาน

ระบบการจัดลำดับความสำคัญนี้มีความสำคัญอย่างยิ่งต่อการรักษาประสบการณ์ผู้ใช้ที่ราบรื่น โดยเฉพาะอย่างยิ่งในแอปพลิเคชันที่ซับซ้อนพร้อมการอัปเดตพร้อมกันจำนวนมาก พิจารณาสถานการณ์ที่ผู้ใช้กำลังพิมพ์ในแถบค้นหา ในขณะเดียวกัน แอปพลิเคชันกำลังดึงข้อมูลและแสดงรายการคำแนะนำในการค้นหาต่างๆ การอัปเดตที่เกี่ยวข้องกับการพิมพ์ของผู้ใช้ควรได้รับความสำคัญ เพื่อให้แน่ใจว่าช่องข้อความยังคงตอบสนองได้ ในขณะที่การอัปเดตที่เกี่ยวข้องกับคำแนะนำในการค้นหาต่างๆ สามารถประมวลผลได้ในพื้นหลัง

ตัวอย่างการใช้งานจริงของการแสดงผลพร้อมกัน

ลองพิจารณาตัวอย่างการใช้งานจริงบางส่วนว่าการแสดงผลพร้อมกันสามารถปรับปรุงประสิทธิภาพและประสบการณ์ผู้ใช้ของแอปพลิเคชัน React ได้อย่างไร

1. การลดทอนการป้อนข้อมูลของผู้ใช้

ลองพิจารณาแถบค้นหาที่แสดงผลการค้นหาเมื่อผู้ใช้พิมพ์ หากไม่มีการแสดงผลพร้อมกัน การกดแป้นพิมพ์แต่ละครั้งอาจเรียกใช้การแสดงผลใหม่ของรายการผลการค้นหาทั้งหมด ซึ่งนำไปสู่ปัญหาด้านประสิทธิภาพและประสบการณ์ผู้ใช้ที่ไม่ราบรื่น

ด้วยการแสดงผลพร้อมกัน เราสามารถใช้การลดทอนเพื่อหน่วงเวลาการแสดงผลของผลการค้นหาจนกว่าผู้ใช้จะหยุดพิมพ์เป็นระยะเวลาสั้นๆ ซึ่งช่วยให้ React สามารถจัดลำดับความสำคัญของการป้อนข้อมูลของผู้ใช้และป้องกันไม่ให้ UI ไม่มีการตอบสนอง

นี่คือตัวอย่างแบบง่าย:

import React, { useState, useCallback } from 'react';

function SearchBar() {
 const [searchTerm, setSearchTerm] = useState('');

 const debouncedSearch = useCallback(
 debounce((value) => {
 // Perform search logic here
 console.log('Searching for:', value);
 }, 300),
 []
 );

 const handleChange = (event) => {
 const value = event.target.value;
 setSearchTerm(value);
 debouncedSearch(value);
 };

 return (
 
 );
}

// Debounce function
function debounce(func, delay) {
 let timeout;
 return function(...args) {
 const context = this;
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(context, args), delay);
 };
}

export default SearchBar;

ในตัวอย่างนี้ ฟังก์ชัน debounce จะหน่วงเวลาการดำเนินการตรรกะการค้นหาจนกว่าผู้ใช้จะหยุดพิมพ์เป็นเวลา 300 มิลลิวินาที ซึ่งทำให้มั่นใจได้ว่าผลการค้นหาจะถูกแสดงผลเมื่อจำเป็นเท่านั้น ซึ่งจะช่วยปรับปรุงประสิทธิภาพของแอปพลิเคชัน

2. การโหลดภาพแบบ Lazy Loading

การโหลดรูปภาพขนาดใหญ่อาจส่งผลกระทบอย่างมากต่อเวลาในการโหลดเริ่มต้นของหน้าเว็บ ด้วยการแสดงผลพร้อมกัน เราสามารถใช้การโหลดแบบ lazy loading เพื่อเลื่อนการโหลดรูปภาพออกไปจนกว่าจะมองเห็นได้ใน viewport

เทคนิคนี้สามารถปรับปรุงประสิทธิภาพที่รับรู้ของแอปพลิเคชันได้อย่างมาก เนื่องจากผู้ใช้ไม่ต้องรอให้รูปภาพทั้งหมดโหลดก่อนจึงจะสามารถเริ่มโต้ตอบกับหน้าเว็บได้

นี่คือตัวอย่างแบบง่ายโดยใช้ไลบรารี react-lazyload:

import React from 'react';
import LazyLoad from 'react-lazyload';

function ImageComponent({ src, alt }) {
 return (
 Loading...
}>
 
 
 );
}

export default ImageComponent;

ในตัวอย่างนี้ องค์ประกอบ LazyLoad จะหน่วงเวลาการโหลดรูปภาพจนกว่าจะมองเห็นได้ใน viewport คุณสมบัติ placeholder ช่วยให้เราแสดงตัวบ่งชี้การโหลดในขณะที่กำลังโหลดรูปภาพ

3. Suspense สำหรับการดึงข้อมูล

React Suspense ช่วยให้คุณ "ระงับ" การแสดงผลขององค์ประกอบในขณะที่รอให้ข้อมูลโหลด สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับสถานการณ์การดึงข้อมูล ซึ่งคุณต้องการแสดงตัวบ่งชี้การโหลดในขณะที่รอข้อมูลจาก API

Suspense ผสานรวมกับการแสดงผลพร้อมกันได้อย่างราบรื่น ทำให้ React สามารถจัดลำดับความสำคัญในการโหลดข้อมูลและป้องกันไม่ให้ UI ไม่มีการตอบสนอง

นี่คือตัวอย่างแบบง่าย:

import React, { Suspense } from 'react';

// A fake data fetching function that returns a Promise
const fetchData = () => {
 return new Promise(resolve => {
 setTimeout(() => {
 resolve({ data: 'Data loaded!' });
 }, 2000);
 });
};

// A React component that uses Suspense
function MyComponent() {
 const resource = fetchData();
 return (
 Loading...